<script setup lang='ts'>
import {computed, ref, onMounted} from 'vue'
import {
  NTag,
  NSelect,
  NDatePicker,
  NFormItem,
  NInput,
  NModal,
  NTabPane,
  NTabs,
  useMessage,
  NTable,
  NPagination,
  NForm,
  NButton,
  NAvatar,
} from 'naive-ui'
import {SvgIcon} from '@/components/common'
import {t} from '@/locales';
import {UserInfo} from "@/typings/user"
import {useUserStore} from '@/store'
import {useRouter} from 'vue-router'
import {loginOut} from "@/api/user"
import {
	CouponRecordPage,
	CouponRecordResult,
	CouponQueryReq,
	PromptRecordPage,
	PromptRecordResult, CouponAddReq, CouponUseReq, couponStatus, CouponDeleteReq,
} from "@/typings/record";
import {getPromptRecordList} from "@/api/record";
import {createCoupont, deleteCoupont, getCouponRecordList, useCoupont} from "@/api/coupon";
import {ElMessage} from "element-plus";
import {serviceTypeOptions} from "@/api/ServiceTypeConstant";
import {record} from '@/components/common'
import {consumerRecord} from '@/components/common'


const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const formValue = ref<CouponQueryReq>(Object.create(null))
const data = ref<CouponRecordPage>(Object.create(null))
const dataVo = ref<CouponRecordResult>(Object.create(null))
const addCoupon = ref<CouponAddReq>(Object.create(null))
const couponUseReq = ref<CouponUseReq>(Object.create(null))
const addReqCoupon = ref<CouponAddReq>(Object.create(null))
const delReqCoupon = ref<CouponDeleteReq>(Object.create(null))
const couponNo = ref<string>()
const showModal = ref(false)
const useModal = ref(false)
const deleteModal = ref(false)

const router = useRouter()

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

interface Props {
  visible: boolean
}

interface Emit {
  (e: 'update:visible', visible: boolean): void
}

const props = defineProps<Props>()

const emit = defineEmits<Emit>()
const show = computed({
  get() {
    return props.visible
  },
  set(visible: boolean) {
    emit('update:visible', visible)
  },
})

async function search() {

  formValue.value.page = page.value
  formValue.value.pageSize = pageSize.value
  // if(formValue.value.range){
  // 	if(formValue.value.range.length>1)
  // 		formValue.value.startTime = new Date(formValue.value.range[0])
  // 	formValue.value.endTime = new Date(formValue.value.range[1])
  // }
  dataVo.value = await getCouponRecordList(formValue.value)
  data.value = dataVo.value
  total.value = Math.floor(data.value.total / pageSize.value);
  if (data.value.total % pageSize.value == 0) {
    total.value = total.value;
  } else {
    total.value = total.value + 1;
  }
}

async function confimCreateCoupon() {
  if (addCoupon.value.couponAmount) {
    showModal.value = true
  } else {
    ElMessage.error("请输入兑换金额")
  }
}

async function confimUseCoupon() {
  if (couponUseReq.value.couponNo) {
    useModal.value = true
  } else {
    ElMessage.error("请输入兑换码")
  }
}
async function confimDeleteCoupon(couponNo : string) {
	if (couponNo) {
		delReqCoupon.value.couponNo = couponNo
		delReqCoupon.value.account = userInfo.value.account
		deleteModal.value = true
	} else {
		ElMessage.error("删除异常")
	}
}


async function createCoupon() {
  if (addCoupon.value.couponAmount) {
    addReqCoupon.value.couponAmount = addCoupon.value.couponAmount * 10000000
    const response = await createCoupont(addReqCoupon.value)
    if (response) {
      couponNo.value = response.couponNo
        ElMessage.success("创建成功")
    }
    showModal.value = false
  } else {
    ElMessage.error("请输入兑换金额")
  }
}

async function useCoupon() {
  if (couponUseReq.value.couponNo) {
    const response = await useCoupont(couponUseReq.value)
    ElMessage.success("使用成功")
    useModal.value = false
  } else {
    ElMessage.error("请输入兑换号码")
  }
}

async function deleteCoupon() {
  if (delReqCoupon.value.couponNo) {
    const response = await deleteCoupont(delReqCoupon.value)
			ElMessage.success("删除成功")
			deleteModal.value = false
      search();
  } else {
    ElMessage.error("删除失败")
  }
}

async function cancel() {
  showModal.value = false
}

async function cancelUse() {
  useModal.value = false
}

async function cancelDelete() {
	deleteModal.value = false
}


function changePage(newPage: number) {
  page.value = newPage
  search()
}


</script>

<template>
  <NModal v-model:show="show" :auto-focus="true" title="交易中心" style="width: 100%; max-width: 900px;" preset="card">
    <div>

      <NTabs type="line">
				<NTabPane name="消费记录" tab="消费记录">
					<consumerRecord />
				</NTabPane>

				<NTabPane name="聊天记录" tab="聊天记录">
					<record />
				</NTabPane>

        <NTabPane name="兑换券使用" tab="兑换券使用">
          <n-form
              inline
              :model="addCoupon"
              :size="'medium'"
              style="display: flex; justify-content: center; align-items: center; padding: 20px; border-radius: 10px;"
          >
            <n-form-item>
              <NText>
                请输入兑换码
              </NText>
            </n-form-item>
            <n-form-item>
              <NInput
                  v-model:value="couponUseReq.couponNo"
                  style="width: 200px;"
              >
              </NInput>
            </n-form-item>
            <n-form-item>
              <n-button attr-type="button" @click="confimUseCoupon" style="background-color: #4CAF50;">
                点击使用
              </n-button>
            </n-form-item>
          </n-form>
        </NTabPane>
        <NTabPane name="兑换券查询" tab="兑换券查询">
          <n-form
              inline
              :model="formValue"
              :size="'medium'">
            <n-form-item label="创建人账号">
              <NInput
                  clearable
                  v-model:value="formValue.account">
              </NInput>
            </n-form-item>
              <n-form-item label="使用人账号">
                  <NInput
                          clearable
                          v-model:value="formValue.useAccount">
                  </NInput>
              </n-form-item>
            <n-form-item label="兑换码">
              <NInput
                  clearable
                  v-model:value="formValue.couponNo">
              </NInput>
            </n-form-item>
            <n-form-item label="兑换金额">
              <NInput
                  clearable
                  v-model:value="formValue.couponAmount"
              >
              </NInput>
            </n-form-item>
            <n-form-item label="兑换状态">
              <NSelect
                  style="width: 175px"
                  v-model:value="formValue.status"
                  :key="formValue.status"
                  :options="couponStatus"
                  clearable
              />
            </n-form-item>
            <!--			<n-form-item label="时间范围" >-->
            <!--				<n-date-picker v-model:value="formValue.range" type="datetimerange" clearable />-->
            <!--			</n-form-item>-->
            <n-form-item>
              <n-button attr-type="button" @click="search">
                搜索
              </n-button>
            </n-form-item>
          </n-form>
          <div style="width: 100%;height: 500px;overflow: auto;">
            <n-table :single-line="false">
              <thead>
              <tr>
                <th>创建人账号</th>
                <th>使用人账号</th>
                <!--					<th>令牌</th>-->
                <th>兑换码</th>
                <th>兑换金额</th>
                <th>使用状态</th>
                <th>创建时间</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="record in data.records">
                <!--					<td>{{record.token}}</td>-->
                <td>
                  <n-tag type="success">
                    {{ record.account }}
                  </n-tag>
                </td>
                  <td>
                          {{ record.useAccount }}
                  </td>
                <td>{{ record.couponNo }}</td>
                <td>{{ record.couponAmount }}美元</td>
                <td v-if="record.status === 1">未使用</td>
                <td v-else-if="record.status === 0">已使用</td>
                <td v-else=" record.status === -1 ">作废</td>
                <td>{{ record.createTime }}</td>
                <td>{{ record.updateTime }}</td>
                <td v-if="record.status === 1">
                  <NButton style="color: red" @click="confimDeleteCoupon(record.couponNo)">作废</NButton>
                </td>

              </tr>
              </tbody>
            </n-table>
          </div>
          <div style="display: flex;
								justify-content: center;
								align-items: center;">
            <n-pagination
                v-model:page="page"
                v-model:page-size="pageSize"
                v-model:page-count="total"
                @update:page="changePage"
                show-size-picker
                :page-sizes="[10, 20, 30, 40]"
            />
          </div>
        </NTabPane>
        <NTabPane name="兑换券生成" tab="兑换券生成">
          <n-form
              inline
              :model="addCoupon"
              :size="'medium'"
              style="display: flex; justify-content: center; align-items: center; padding: 20px; border-radius: 10px;"
          >
            <n-form-item>
              <NText>
                兑换金额
              </NText>
            </n-form-item>
            <n-form-item>
              <NInput
                  v-model:value="addCoupon.couponAmount"
                  style="width: 200px;"
              >
              </NInput>
            </n-form-item>
            <n-form-item>
              <n-button attr-type="button" @click="confimCreateCoupon" style="background-color: #4CAF50;">
                生成兑换码
              </n-button>
            </n-form-item>
					</n-form>
					<n-form style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
						<n-form-item>
							<NText strong v-if="couponNo" class="dark:text-white" style="font-size: 18px;">你的兑换码为： {{ couponNo }}</NText>
						</n-form-item>
					</n-form>

				</NTabPane>

      </NTabs>
    </div>
  </NModal>
  <NModal v-model:show="showModal" title="兑换提醒"
          style="width: 50%; max-width: 250px; display: flex; flex-direction: column; align-items: center; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 10px;"
          preset="card">
    <div style="margin-bottom: 20px;">是否使用兑换 {{ addCoupon.couponAmount }}$ 兑换券</div>
    <div style="display: flex; justify-content: space-between; width: 100%;">
      <NButton @click="createCoupon" style="background-color: #4CAF50; color: white; width: 48%; border-radius: 5px;">
        确定
      </NButton>
      <NButton @click="cancel" style="background-color: #f44336; color: white; width: 48%; border-radius: 5px;">取消
      </NButton>
    </div>
  </NModal>
  <NModal v-model:show="useModal" title="使用提醒"
          style="width: 50%; max-width: 250px; display: flex; flex-direction: column; align-items: center; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 10px;"
          preset="card">
    <div style="margin-bottom: 20px;">是否使用该兑换券</div>
    <div style="display: flex; justify-content: space-between; width: 100%;">
      <NButton @click="useCoupon" class="dark:text-white" style="background-color: #4CAF50; width: 48%; border-radius: 5px;">
        确定
      </NButton>
      <NButton @click="cancelUse" class="dark:text-white" style="background-color: #f44336; width: 48%; border-radius: 5px;">
        取消
      </NButton>
    </div>
  </NModal>
  <NModal v-model:show="deleteModal" title="删除提醒"
          style="width: 50%; max-width: 250px; display: flex; flex-direction: column; align-items: center; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 10px;"
          preset="card">
    <div style="margin-bottom: 20px;">是否删除该兑换券</div>
    <div style="display: flex; justify-content: space-between; width: 100%;">
      <NButton @click="deleteCoupon" style="background-color: #4CAF50; color: white; width: 48%; border-radius: 5px;">
        确定
      </NButton>
      <NButton @click="cancelDelete" style="background-color: #f44336; color: white; width: 48%; border-radius: 5px;">
        取消
      </NButton>
    </div>
  </NModal>


</template>
